<template lang="pug">
  div.hello
    div.display-flex.left
      div.cell
        div.tb(ref="mainPie")
      div.cell
        div.tb
      div.cell
        div.tb
    div.cell.main
      div.display-flex.mcnt
        div.cell.mcnt-1
          div.display-flex.mcnt-1-1
            div.tb
          div.cell
            div.tb(ref="mainCnt")
        div.display-flex.side
          div.display-flex.scnt-1
            div.tb
          div.cell
            div.tb
      div.cell
        div.display-flex.cnt-1
          div.tb
        div.cell
          div.tb
</template>

<script>
  import echarts from 'echarts'

  export default {
    name: 'HelloWorld',
    data() {
      return {
        msg: 'Welcome to Your Vue.js App'
      }
    },
    mounted() {
      window.mainCnt = this.$refs.mainCnt
      console.log('this.$refs.mainCnt.width:', this.$refs.mainCnt.clientWidth)
      console.log('this.$refs.mainCnt.height:', this.$refs.mainCnt.clientHeight)
      this.init()
    },
    methods: {
      init() {
        this.pie()
        this.bar()
      },
      pie() {
        let option = {
          title: {
            text: '南丁格尔玫瑰图',
            subtext: '纯属虚构',
            x: 'center'
          },
          tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b} : {c} ({d}%)'
          },
          legend: {
            x: 'center',
            y: 'bottom',
            data: ['rose1', 'rose2', 'rose3', 'rose4', 'rose5', 'rose6', 'rose7', 'rose8']
          },
          toolbox: {
            show: true,
            feature: {
              mark: {show: true},
              dataView: {show: true, readOnly: false},
              magicType: {
                show: true,
                type: ['pie', 'funnel']
              },
              restore: {show: true},
              saveAsImage: {show: true}
            }
          },
          calculable: true,
          series: [
            {
              name: '面积模式',
              type: 'pie',
              radius: [20, 50],
              center: ['50%', '50%'],
              roseType: 'area',
              data: [
                {value: 10, name: 'rose1'},
                {value: 5, name: 'rose2'},
                {value: 15, name: 'rose3'},
                {value: 25, name: 'rose4'},
                {value: 20, name: 'rose5'},
                {value: 35, name: 'rose6'},
                {value: 30, name: 'rose7'},
                {value: 40, name: 'rose8'}
              ]
            }
          ]
        }
        let myChart = echarts.init(this.$refs.mainPie)
        myChart.setOption(option)
      },
      bar() {
        let myMonth = [], aData = [], bData = []
        for (let i = 1; i <= 12; i++) {
          myMonth.push(i + '月')
          aData.push(Math.floor(Math.random() * 20 + 1) * 100)
          bData.push(Math.floor(Math.random() * 20 + 1) * 100)
        }
        let myChart = echarts.init(this.$refs.mainCnt)
        myChart.setOption({
          textStyle: {
            color: 'rgba(255, 255, 255, 1)'
          },
          title: {
            // text: '设备安装数量',
            text: '{a|这段文本采用样式}',
            textStyle: {
              rich: {
                a: {
                  width: 900,
                  fontSize: 20,
                  fontWeight: 'bold',
                  color: '#ffffff',
                  align: 'center'
                }
              }
            }
          },
          tooltip: {},
          legend: {
            right: 0,
            textStyle: {
              color: '#ffffff'
            },
            data: ['A', 'B']
          },
          xAxis: {
            type: 'category',
            axisTick: false,
            data: myMonth
          },
          yAxis: {},
          series: [
            {
              name: 'A',
              type: 'bar',
              barGap: 0,
              data: aData,
              barWidth: '10px',
              itemStyle: {
                color: '#07fbf9'
              }
            },
            {
              name: 'B',
              type: 'bar',
              barGap: 0,
              data: bData,
              barWidth: '10px',
              itemStyle: {
                color: '#1f5c71'
              }
            }
          ]
        })
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="stylus">
  @import "./customFun.styl"

  .hello
    position fixed
    top 0
    left 0
    width 100%
    height 100%
    background-color #182535
    display flex
    padding 10px
    box-sizing border-box
    .display-flex
      displayFlex()
    .flex-column
      flex-column()
    .flex_1
      flex 1
    .cell
      displayFlex()
      flex1()
    .left
      flex-direction column
      width 25%
    .main
      flex-direction column
      .mcnt
        flex 2
        .mcnt-1
          flex-direction column
          .mcnt-1-1
            height 100px
        .side
          flex-direction column
          width 35%
          .scnt-1
            flex 2
      .cnt-1
        width 35%
    .tb
      flex 1
      border 1px solid #4c8493
      margin 10px
</style>
